<script setup>
import { onMounted, ref } from 'vue';
import { modifyUserStatusAPI } from '@/apis/user';
import { getUserAPI } from '@/apis/user';
import { getUserInfoByIdAPI } from '@/apis/user';
const users = ref([]);
const getNormalUserInfo = async () => {
    users.value = (await getUserAPI()).data
}
onMounted(() => getNormalUserInfo())
const toggleUserStatus = async (user) => {
    const res = (await modifyUserStatusAPI(
        {
            id: user.id,
            status: user.status
        }
    )).data
    if (res) {
        user.status = user.status == 0 ? 1 : 0
    }
};
const form = ref({})
const dialog = ref(false)
const cancelForm = () => {
    dialog.value = false;
}
const onClick = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
        dialog.value = false
    }, 400)
}
const getUserInfo = async (id) => {
    dialog.value = true
    //发送网络请求
    form.value = (await getUserInfoByIdAPI(id)).data
}
//TODO修改功能完成
// 表单验证规则
const rules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    phone: [
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    email: [
        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
    ]
})
const beforeAvatarUpload = (file) => {
    const isImage = file.type.startsWith('image/')
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isImage) {
        ElMessage.error('只能上传图片文件!')
    }
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过2MB!')
    }
    return isImage && isLt2M
}
const handleAvatarSuccess = (respose) => {
    avatar.value = respose.data
    form.value.avatar = respose.data
}
const action = ref(null)
const loading = ref(false)
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
</script>

<template>
    <el-card class="management-container">
        <template #header>
            <div class="header-wrapper">
                <span class="header-title">用户管理</span>
                <div class="action-buttons"></div>
            </div>
        </template>
        <el-table :data="users" border>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button size="small" @click="getUserInfo(scope.row.id)">编辑</el-button>
                    <el-popconfirm :title="scope.row.status === 1 ? '确定要禁用该用户吗？' : '确定要启用该用户吗？'"
                        @confirm="toggleUserStatus(scope.row)" confirm-button-text="确认" cancel-button-text="取消">
                        <template #reference>
                            <el-button size="small" :type="scope.row.status === 1 ? 'danger' : 'primary'">
                                {{ scope.row.status === 1 ? '禁用' : '启用' }}
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-drawer v-model="dialog" title="编辑" direction="rtl" class="demo-drawer">
        <div class="demo-drawer__content">
            <el-form :model="form" :rules="rules">
                <el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
                    :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
                    <el-avatar :size="50" :src="avatar" />
                </el-upload>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="个性签名">
                    <el-input v-model="form.signature" autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" autocomplete="off" />
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" :loading="loading" @click="onClick">
                    {{ loading ? '提交中 ...' : '确定' }}
                </el-button>
            </div>
        </div>
    </el-drawer>
</template>
<style lang="scss" scoped>
.management-container {
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        .header-title {
            font-size: 18px;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }
    }

    .el-table {
        margin-top: 20px;
    }
}
</style>